/* ----------------------------------------*\
  CONTAINER
\* ---------------------------------------- */

.container {
  @apply w-full mx-auto;
  @apply px-4 xs:px-7 sm:px-9 lg:px-10 xl:px-12 3xl:px-16;

  @media (min-width: theme('screens.2xl')) {
    max-width: theme('container.2xl');
  }

  @media (min-width: theme('screens.3xl')) {
    max-width: theme('container.3xl');
  }
}

.container:not(.breadcrumb) + .container {
  @apply pt-14 lg:pt-20 3xl:pt-32;
}

.container--flex {
  @apply flex justify-between;
}

/* VERTICAL PADDINGS */

.container--py {
  @apply py-14 lg:py-20 3xl:py-32;
}

.container--py-half {
  @apply py-7 lg:py-10 3xl:py-16;
}

.container--pt {
  @apply pt-14 lg:pt-20 3xl:pt-32;
  @apply pb-0 lg:pb-0 3xl:pb-0;
}

.container--pb {
  @apply pt-0 lg:pt-0 3xl:pt-0;
  @apply pb-14 lg:pb-20 3xl:pb-32;
}

.container--pb-half {
  @apply pb-7 lg:pb-10 3xl:pb-16;
}

/* CONTAINER + 12 COLS GRID */

.container--grid {
  @apply grid grid-cols-12;

  & + & {
    @apply gap--top;
  }
}

.container__full {
  @apply col-span-12;
}

.container__center--xs {
  @apply col-span-12;
  @apply md:col-span-10;
  @apply lg:col-span-8;
  @apply xl:col-span-6;

  @apply md:col-start-2;
  @apply lg:col-start-3;
  @apply xl:col-start-4;

  figure img {
    @apply w-full;
  }
}

.container__center--sm {
  @apply col-span-12;
  @apply md:col-span-10;
  @apply xl:col-span-8;

  @apply md:col-start-2;
  @apply xl:col-start-3;
}

.container__center--md {
  @apply col-span-12;
  @apply xl:col-start-2 xl:col-end-12;
}

.container__main {
  @apply col-span-12;
  @apply md:col-span-7;
  @apply lg:col-span-6 lg:col-start-2;
}

.container--reverse-mobile .container__main {
  @apply order-2 md:order-1;
}

.container--reverse .container__main {
  @apply md:col-start-6;
  @apply order-1 md:order-2;
}

.container--reverse-mobile.container--reverse .container__main {
  @apply order-2 md:order-2;
}

.container__aside {
  @apply col-span-12;
  @apply md:col-span-5;
  @apply lg:col-span-4;

  @apply md:col-start-8;

  & > *,
  & .sticky > * {
    @apply mb-7 lg:mb-8;
  }
}

.container__mobile {
  @apply md:hidden;

  & > *,
  & .sticky > * {
    @apply mb-7;
  }
}

.container--reverse-mobile .container__aside {
  @apply order-1 md:order-2;
}

.container--reverse .container__aside {
  @apply md:col-start-1 md:order-1;
  @apply lg:col-start-2;
}

.container--reverse-mobile.container--reverse .container__aside {
  @apply order-1 md:order-1;
}

@layer utilities {
  .broader-than-container,
  .broader-than-container-centered {
    --side-margin: calc(theme('spacing.4') * -1);

    @media screen(xs) {
      --side-margin: calc(theme('spacing.7') * -1);
    }

    @media screen(sm) {
      --side-margin: calc((100vw - 6em) / -12);
    }

    @media screen(xl) {
      --side-margin: calc((theme('screens.xl') - 6em) / -12);
    }

    @media screen(2xl) {
      --side-margin: calc((theme('screens.2xl') - 6em) / -12);
    }

    margin-left: var(--side-margin);
    margin-right: var(--side-margin);

    padding-left: calc(var(--side-margin) * -1);
    padding-right: calc(var(--side-margin) * -1);
  }

  .broader-than-container {
    @media screen(md) {
      padding-left: 0;
      padding-right: 0;
    }
  }
}
